<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//初始化timer1
		var timer1 = "";
		$("#begin").click(function(){
			if(timer1!=""){
				clearInterval(timer1);
			}
			timer1 = setInterval(tt,1000);
		});
		
		$("#pause").click(function(){
			clearInterval(timer1);
		});
		
		//清除，秒表还原为00:00
		$("#clear").click(function(){
			clearInterval(timer1);
			$("#s").text("00");
			$("#mi").text("00");
		});
		
		function tt(){
			//alert();
			var sVal = parseInt($("#s").text());
			var miVal = parseInt($("#mi").text());
			if($("#s").text().substr(0,1)=="0"){
				var sVal = parseInt($("#s").text().substr(1));
			}
			if($("#mi").text().substr(0,1)=="0"){
				var miVal = parseInt($("#mi").text().substr(1));
			}
			
			if(sVal>58){
				$("#s").html("00");
				if(miVal>58){
					clearInterval(timer1);
					return;
				}else if(miVal<9){   //小于10的时候，十位数用0填充
					var mm = miVal+1;
					$("#mi").html("0"+mm);
				}else{
					$("#mi").html(miVal+1);
				}
			}else if(sVal<9){
				var vv = sVal+1;
				$("#s").html("0"+vv);
			}else{
				$("#s").html(sVal+1);
			}
		}
		
		//快捷键
		$(document).keydown(function(event){
			// 快捷键's'，开始计时
			if(event.keyCode==83){
				if(timer1!=""){
				clearInterval(timer1);
				}
				timer1 = setInterval(tt,1000);
			}
			// 快捷键'p'，暂停计时
			if(event.keyCode==80){
				clearInterval(timer1);
			}
		});

	});
	
</script>
<style type="text/css">
	#main{ margin:100px auto; width:210px; height:auto; background:#f3f3f3; text-align:center;}
	td{ font-size:66px; width:100px; height:98px; border:1px solid #ccc;}
	table{ text-align:center;}
	#mi{ color:#006;}
	#s{ color:#603;}
	sub{ font-size:16px; color:#999;}
	input{ height:36px; width:64px; margin-top:8px; cursor:pointer;}
</style>
<title>秒表</title>
</head>

<body>
	<div id="main">
	<table><tr>
	<td><span id="mi">00</span><sub>分</sub></td><td><span id="s">00</span><sub>秒</sub></td>
	</tr></table>
	<input type="button" value="开始(s)" id="begin" />&nbsp;
	<input type="button" value="暂停(p)" id="pause" />&nbsp;
	<input type="button" value="清除" id="clear" />
	</div>
</body>
</html>